import { Component } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { Modal, Tooltip, Divider, Card, Table } from 'antd';
import styles from './Customers.css';
import { PAGE_SIZE } from 'globalConstants';
import ProfileModal from './ProfileModal';
import ChangeLevelModal from './ChangeLevelModal';
import SearchForm from './SearchForm';
import CustomPagin from 'components/CustomPagin';
// import { getStatusDesc } from './utils';

let filters = {};
class Customers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editCustomerId: null,
      changeLevelCustomerId: null,
    };
  }

  handleChangeLevel = values => {
    const { level } = values;
    const { dispatch } = this.props;
    const { changeLevelCustomerId: id } = this.state;

    Modal.confirm({
      title: `客户等级修改确认`,
      content: `你确定要修改客户的学习等级为L${level}吗？`,
      iconType: 'info-circle',
      onOk: () => {
        dispatch({
          type: 'customers/changeLevel',
          payload: {
            id,
            level,
          },
        }).then(result => {
          if (!result.code) {
            this.handleToggleChangeLevel(null);
          }
        });
      },
    });
  };

  doQuery = filters => {
    this.props.dispatch(
      routerRedux.push({
        pathname: '/customers',
        query: filters,
      })
    );
  };

  handlePageChange = page => {
    filters = { ...filters, page };
    this.doQuery(filters);
  };

  handleSearch = params => {
    const page = 1;
    filters = { ...params, page };
    this.doQuery(filters);
  };

  handleToggleProfile = editCustomerId => {
    this.setState({
      editCustomerId,
    });
  };

  handleToggleChangeLevel = changeLevelCustomerId => {
    this.setState({
      changeLevelCustomerId,
    });
  };

  render() {
    const columns = [
      {
        title: '客户ID',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '昵称',
        dataIndex: 'nickname',
        key: 'nickname',
        render: (nickname, record) => {
          return (
            <Tooltip title="查看客户资料详情">
              <a
                href="javascript: void(0)"
                onClick={e => {
                  e.preventDefault();
                  this.handleToggleProfile(record.id);
                }}>
                {nickname}
              </a>
            </Tooltip>
          );
        },
      },
      {
        title: '手机号',
        dataIndex: 'phone',
        key: 'phone',
      },
      {
        title: '注册时间',
        dataIndex: 'createdAt',
        key: 'createdAt',
      },
      // {
      //   title: '关注状态',
      //   dataIndex: 'status',
      //   key: 'status',
      //   render: status => getStatusDesc(status),
      // },
      {
        title: '操作',
        key: 'operation',
        render: (text, record) => (
          <span className={styles.operation}>
            <Tooltip title="查看客户购买记录">
              <Link to={`/orders/list?customerId=${record.id}`}>订单</Link>
            </Tooltip>
            <Divider type="vertical" key="line" />
            <a
              href="javascript:void(0);"
              onClick={e => {
                e.preventDefault();
                this.handleToggleChangeLevel(record.id);
              }}>
              修改等级
            </a>
          </span>
        ),
      },
    ];
    const { editCustomerId, changeLevelCustomerId } = this.state;
    const { items: dataSource, loading, total, page: current } = this.props;

    return (
      <div className={styles.normal}>
        {editCustomerId !== null && (
          <ProfileModal
            onCancel={() => {
              this.handleToggleProfile(null);
            }}
            customerId={editCustomerId}
          />
        )}
        {changeLevelCustomerId !== null && (
          <ChangeLevelModal
            onOk={this.handleChangeLevel}
            onCancel={() => {
              this.handleToggleChangeLevel(null);
            }}
            customerId={changeLevelCustomerId}
          />
        )}

        <Card className={styles.form}>
          <SearchForm onSearch={this.handleSearch} />
        </Card>
        <Table
          bordered
          loading={loading}
          columns={columns}
          dataSource={dataSource}
          rowKey={record => record.id}
          pagination={false}
        />
        <CustomPagin
          total={total}
          current={current}
          pageSize={PAGE_SIZE}
          onChange={this.handlePageChange}
        />
      </div>
    );
  }
}

if (process.env.UMI_ENV !== 'prod') {
  Customers.propTypes = {
    dispatch: PropTypes.func.isRequired,
    total: PropTypes.number.isRequired,
    items: PropTypes.array.isRequired,
    page: PropTypes.number.isRequired,
    loading: PropTypes.bool.isRequired,
  };
}

Customers.defaultProps = {
  dispatch: () => {},
  total: 0,
  items: [],
  page: 1,
  loading: false,
};

function mapStateToProps({ loading, customers }) {
  const { items, total, page } = customers;
  return {
    items,
    total,
    page,
    loading: loading.effects['customers/fetchList'],
  };
}

export default connect(mapStateToProps)(Customers);
